<template>
<div>
    <Row style="margin:15px 15px">
        <Col span="2">
        <Card title="<p class='flowListHead'>流图列表</p>" class="flow_list">
            <div class="flowList_margin">
                <Button><i class="layui-icon layui-icon-add-1"></i>新建流程图</Button>
                <Button><i class="layui-icon layui-icon-delete"></i>删除流程图</Button>
            </div>
            
            <Table class="layui-table">
                <thead>
                    <tr>
                        <td>
                            选中
                        </td>
                        <td>
                            流表名称
                        </td>
                    </tr>
                </thead>
                <tr>
                    <td>选中？</td>
                    <td>流程图一</td>
                </tr>
            </Table>
        </Card>
        </Col>

        <Col span="7" class="flow" style="margin-left:4px">
            <Card title="流图操作">
                <div class="toolbar" style="margin-bottom:15px">
                    <Button @click="addCircle">起始节点</Button>
                    <Button @click="addRect">常规节点</Button>
                    <Button @click="addRhombus">条件节点</Button>
                    <Button @click="isLineModel">直线</Button>
                    <Button @click="isPolylineModel">曲线</Button>
                    <!-- <Button @click="selectedModel">选择模式</Button> -->
                    <!-- <Button @click="dragModel">拖拽模式</Button> -->
                    <Button @click="saveAll">保存</Button>
                </div>
                <div>
                    <Input placeholder="输入流图名称"></Input>
                </div>
                <div id="mountNode" class="margin" ></div>
            </Card>
        </Col>
        <Col span="2" style="margin-left:4px">
        <Card :title='PropertyBar' class="property_bar">
          <Table class="layui-table"  v-if="PropertyBar=='画布属性'">
            <tr>
              <td>是否开启网格</td>
              <td>是/否</td>
            </tr>
            <tr>
              <td>网格类型设置</td>
              <td>点/线</td>
            </tr>
            <tr>
              <td>画布背景颜色</td>
              <td></td>
            </tr>
          </Table>
          <Table class="layui-table"  v-if="PropertyBar=='节点属性'">
            <tr>
              <td>节点名称</td>
              <td>
                <Input placeholder="输入节点名字" style="border:none" v-model="NodeProperty.Label.Text"></Input>
              </td>
            </tr>
            <tr>
              <td>节点大小</td>
              <td>
                //TODO:可调整
              </td>
            </tr>
            <tr>
              <td>节点颜色</td>
              <td>
              </td>
            </tr>
            <tr>
              <td>节点类型</td>
              <td>
              </td>
            </tr>
            <tr>
              <td>是否开启监听</td>
              <td>
                
              </td>
            </tr>
            <tr>
              <td>开启弹窗</td>
              <td>
              </td>
            </tr>
            <tr>
              <td>关闭弹窗</td>
              <td>
              </td>
            </tr>
            <tr>
              <td>
                <Button @click="saveNodeProperty">保存节点属性</Button>
              </td>
              <td>
                <Button @click="delNode">删除节点</Button>
              </td>
            </tr>
          </Table>
          <Table class="layui-table"  v-if="PropertyBar=='Edge属性'">
            <tr>
              <td>Edge名称</td>
              <td>
                <Input placeholder="输入Edge名字" style="border:none" v-model="Edge.Desc"></Input>
              </td>
            </tr>
            <tr>
              <td>Size</td>
              <td></td>
            </tr>
            <tr>
              <td>Edge颜色</td>
              <td></td>
            </tr>
            <tr>
              <td>字体颜色</td>
              <td></td>
            </tr>
            <tr>
              <td>
                <Button @click="saveEdgeProperty">保存Edge属性</Button>
              </td>
              <td>
                <Button @click="delEdge">删除Edge</Button>
              </td>
            </tr>
          </Table>
        </Card>
        </Col>
    </Row>
</div>
</template>
<script lang="ts" src="./index.ts">
</script>
<style scoped src="./index.css">
</style>
